---
title: Timeline
description: Displays a list of events in chronological order.
---

<ComponentPreview 
   name="timeline-demo"
   styleSwitch={true}
   button="copy"
   dots={false}
 />


## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
npx nyxb@latest add timeline
```

</TabsContent>

<TabsContent value="manual">

<Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="timeline" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</Tabs>

## Usage

```tsx
import {
  Timeline,
  TimelineContent,
  TimelineDot,
  TimelineHeading,
  TimelineItem,
  TimelineLine,
} from "~/components/ui/timeline"
```

```tsx
<Timeline>
  <TimelineItem status="done">
    <TimelineHeading>Plan!</TimelineHeading>
    <TimelineDot status="done" />
    <TimelineLine done />
    <TimelineContent>
      Before diving into coding, it is crucial to plan your software project
      thoroughly.
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
    <TimelineHeading>Done!</TimelineHeading>
    <TimelineDot />
  </TimelineItem>
</Timeline>
```

## Examples

### Left Aligned

<ComponentPreview 
   name="timeline-demo"
   styleSwitch={true}
   button="copy"
   dots={false}
 />

### Right Aligned

<ComponentPreview 
   name="timeline-right"
   styleSwitch={true}
   button="copy"
   dots={false}
 />

### Alternating

<ComponentPreview 
   name="timeline-alternate"
   styleSwitch={true}
   button="copy"
   dots={false}
 />

### With Lables

<ComponentPreview 
   name="timeline-labels"
   styleSwitch={true}
   button="copy"
   dots={false}
 />
